<template>
	<view class="container">
		<view class="prod-list">
			<block v-for="(child, i) in shopCartItemDiscounts" :key="i">
				<view class="prod-block">
					<view class="discount-tips" :hidden="!child.chooseDiscountItemDto">
						<text class="text-block">{{
								parseDiscount(
									child.chooseDiscountItemDto
										? child.chooseDiscountItemDto.discountRule
										: ""
								)
						}}</text>
						<text class="text-list">{{
								parseDiscountMsg(
									child.chooseDiscountItemDto
										? child.chooseDiscountItemDto.discountRule
										: "",
									child.chooseDiscountItemDto
										? child.chooseDiscountItemDto.needAmount
										: "",
									child.chooseDiscountItemDto
										? child.chooseDiscountItemDto.discount
										: ""
								)
						}}</text>
					</view>
					<block v-for="(item, index) in child.shopCartItems" :key="index">
						<view class="item">
							<view class="btn">
								<label>
									<checkbox @click="onSelectedItem" :data-scindex="i" :data-index="index" :value="item.prodId"
										:checked="item.checked" color="#105c3e" />
								</label>
							</view>
							<view class="prodinfo">
								<view class="pic">
									<image :src="item.pic" />
								</view>
								<view class="opt">
									<view class="prod-name">{{ item.prodName }}</view>
									<text class="prod-info-text" :class="item.skuName ? '' : 'empty-n'">
										{{ item.skuName }}
									</text>
									<view class="price-count">
										<view class="price">
											<text class="symbol">￥</text>
											<text class="big-num">{{
													parsePrice(item.price)[0]
											}}</text>
											<text class="small-num">.{{ parsePrice(item.price)[1] }}</text>
										</view>
										<view class="m-numSelector">
											<view @click="onCountMinus" class="minus" :data-scindex="i" :data-index="index"></view>
											<input type="number" :value="item.prodCount" :disabled="true" />
											<view @click="onCountPlus" class="plus" :data-scindex="i" :data-index="index"></view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</block>

			<!-- <view class='lose-efficacy'>
      <view class='discount-tips'>
        
        <text class='text-list'>失效商品</text>
        <text class='empty-prod'>清空失效商品</text>
      </view>
      <view class='item'>
        <view class="staus">
          <text>失效</text>
        </view>
        <view class='prodinfo'>
          <view class="pic">
            <image src='../../images/prod/pic11.jpg' />
          </view>
          <view class="opt">
            <view class='prod-name'>宠物用品洗澡香波沐浴除臭留</view>
            <view class='prod-info-text'>60克</view>
            <view class='price-count'>
              <view class='price'>
                <text class='symbol'>￥</text>
                <text class='big-num'>{{parsePrice(10.00)[0]}}</text>
                <text class='small-num'>.{{parsePrice(10.00)[1]}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view> -->
		</view>

		<view class="empty" v-if="shopCartItemDiscounts.length == 0">
			<view class="img">
				<image src="../../static/tabbar/basket.png" lazy-load></image>
			</view>
			<view class="txt"> 您还没有添加任何商品哦~ </view>
		</view>

		<!-- 底部按钮 -->
		<view class="cart-footer" v-if="shopCartItemDiscounts.length > 0">
			<view class="btn all">
				<label @click="onSelAll">
					<checkbox :checked="allChecked" color="#f7d731" />全选
				</label>
			</view>
			<view class="btn del" @click="onDelBasket">
				<text>删除</text>
			</view>
			<view class="btn total">
				<view class="finally">
					<text>合计:</text>
					<view class="price">
						<text class="symbol">￥</text>
						<text class="big-num">{{ parsePrice(finalMoney)[0] }}</text>
						<text class="small-num">.{{ parsePrice(finalMoney)[1] }}</text>
					</view>
				</view>
				<view class="total-msg" v-if="subtractMoney > 0">
					总额:￥{{ toPrice(totalMoney) }} 立减:￥{{ toPrice(subtractMoney) }}
				</view>
			</view>
			<view class="btn settle" @click="toFirmOrder">
				<text>结算</text>
			</view>
		</view>
		<!-- end 底部按钮 -->
	</view>
</template>

<script>
import { getCartCount, request } from "../../utils/http";
import {
	parseDiscount,
	parsePrice,
	toPrice,
	parseDiscountMsg,
} from "../../wxs/numbers";

export default {
	data() {
		return {
			shopCartItemDiscounts: [],
			finalMoney: 0,
			totalMoney: 0,
			subtractMoney: 0,
			allChecked: false,
		};
	},
	onShow() {
		this.loadBasketData();
		getCartCount(); //重新计算购物车总数量
	},
	methods: {
		parseDiscount,
		parseDiscountMsg,
		toPrice,
		parsePrice,
		loadBasketData() {
			uni.showLoading(); //加载购物车

			var params = {
				url: "/p/shopCart/info",
				method: "POST",
				data: {},
				callBack: (res) => {
					if (res.length > 0) {
						// 默认不选中
						var shopCartItemDiscounts = res[0].shopCartItemDiscounts;
						shopCartItemDiscounts.forEach((shopCartItemDiscount) => {
							shopCartItemDiscount.shopCartItems.forEach((shopCartItem) => {
								shopCartItem.checked = false;
							});
						});
						this.shopCartItemDiscounts = shopCartItemDiscounts;
						this.allChecked = false;
					} else {
						this.shopCartItemDiscounts = [];
					}
					this.calTotalPrice(); //计算总价
					uni.hideLoading();
				},
			};
			request(params);
		},

		/**
		 * 去结算
		 */
		toFirmOrder: function () {
			var shopCartItemDiscounts = this.shopCartItemDiscounts;
			var basketIds = [];
			shopCartItemDiscounts.forEach((shopCartItemDiscount) => {
				shopCartItemDiscount.shopCartItems.forEach((shopCartItem) => {
					if (shopCartItem.checked) {
						basketIds.push(shopCartItem.basketId);
					}
				});
			});
			if (!basketIds.length) {
				uni.showToast({
					title: "请选择商品",
					icon: "none",
				});
				return;
			}
			uni.setStorageSync("basketIds", JSON.stringify(basketIds));
			uni.navigateTo({
				url: "/pages/submit-order/submit-order?orderEntry=0",
			});
		},

		/**
		 * 全选
		 */
		onSelAll: function () {
			var allChecked = this.allChecked;
			allChecked = !allChecked; //改变状态
			var shopCartItemDiscounts = this.shopCartItemDiscounts;

			for (var i = 0; i < shopCartItemDiscounts.length; i++) {
				var cItems = shopCartItemDiscounts[i].shopCartItems;
				for (var j = 0; j < cItems.length; j++) {
					cItems[j].checked = allChecked;
				}
			}

			this.allChecked = allChecked;
			this.shopCartItemDiscounts = shopCartItemDiscounts;

			this.calTotalPrice(); //计算总价
		},

		/**
		 * 每一项的选择事件
		 */
		onSelectedItem: function (e) {
			var index = e.currentTarget.dataset.index; // 获取data- 传进来的index
			var scindex = e.currentTarget.dataset.scindex;

			var shopCartItemDiscounts = this.shopCartItemDiscounts; // 获取购物车列表
			var checked = shopCartItemDiscounts[scindex].shopCartItems[index].checked; // 获取当前商品的选中状态
			shopCartItemDiscounts[scindex].shopCartItems[index].checked = !checked; // 改变状态
			this.shopCartItemDiscounts = shopCartItemDiscounts;

			this.checkAllSelected(); //检查全选状态
			this.calTotalPrice(); //计算总价
		},

		/**
		 * 检查全选状态
		 */
		checkAllSelected: function () {
			var allChecked = true;
			var shopCartItemDiscounts = this.shopCartItemDiscounts;

			var flag = false;
			for (var i = 0; i < shopCartItemDiscounts.length; i++) {
				var cItems = shopCartItemDiscounts[i].shopCartItems;
				for (var j = 0; j < cItems.length; j++) {
					if (!cItems[j].checked) {
						allChecked = !allChecked;
						flag = true;
						break;
					}
				}
				if (flag) {
					break;
				}
			}

			this.allChecked = allChecked;
		},

		/**
		 * 计算购物车总额
		 */
		calTotalPrice: function () {
			var shopCartItemDiscounts = this.shopCartItemDiscounts;
			var shopCartIds = [];
			for (var i = 0; i < shopCartItemDiscounts.length; i++) {
				var cItems = shopCartItemDiscounts[i].shopCartItems;
				for (var j = 0; j < cItems.length; j++) {
					if (cItems[j].checked) {
						shopCartIds.push(cItems[j].basketId);
					}
				}
			}

			var ths = this;
			uni.showLoading();
			var params = {
				url: "/p/shopCart/totalPay",
				method: "POST",
				data: shopCartIds,
				callBack: function (res) {
					ths.finalMoney = res.finalMoney;
					ths.totalMoney = res.totalMoney;
					ths.subtractMoney = res.subtractMoney;

					uni.hideLoading();
				},
			};
			request(params);
		},

		/**
		 * 减少数量
		 */
		onCountMinus: function (e) {
			var index = e.currentTarget.dataset.index;
			var scindex = e.currentTarget.dataset.scindex;
			var shopCartItemDiscounts = this.shopCartItemDiscounts;
			var prodCount =
				shopCartItemDiscounts[scindex].shopCartItems[index].prodCount;
			if (prodCount > 1) {
				this.updateCount(shopCartItemDiscounts, scindex, index, -1);
			}
		},

		/**
		 * 增加数量
		 */
		onCountPlus: function (e) {
			var index = e.currentTarget.dataset.index;
			var scindex = e.currentTarget.dataset.scindex;
			var shopCartItemDiscounts = this.shopCartItemDiscounts;
			this.updateCount(shopCartItemDiscounts, scindex, index, 1);
		},

		/**
		 * 改变购物车数量接口
		 */
		updateCount: function (shopCartItemDiscounts, scindex, index, prodCount) {
			var ths = this;
			uni.showLoading({
				mask: true,
			});
			var params = {
				url: "/p/shopCart/changeItem",
				method: "POST",
				data: {
					count: prodCount,
					prodId: shopCartItemDiscounts[scindex].shopCartItems[index].prodId,
					skuId: shopCartItemDiscounts[scindex].shopCartItems[index].skuId,
					shopId: 1,
				},
				callBack: function (res) {
					shopCartItemDiscounts[scindex].shopCartItems[index].prodCount +=
						prodCount;

					ths.shopCartItemDiscounts = shopCartItemDiscounts;

					ths.calTotalPrice(); //计算总价
					uni.hideLoading();

					getCartCount(); //重新计算购物车总数量
				},
			};
			request(params);
		},

		/**
		 * 删除购物车商品
		 */
		onDelBasket: function () {
			var ths = this;

			var shopCartItemDiscounts = this.shopCartItemDiscounts;
			var basketIds = [];
			for (var i = 0; i < shopCartItemDiscounts.length; i++) {
				var cItems = shopCartItemDiscounts[i].shopCartItems;
				for (var j = 0; j < cItems.length; j++) {
					if (cItems[j].checked) {
						basketIds.push(cItems[j].basketId);
					}
				}
			}

			if (basketIds.length == 0) {
				uni.showToast({
					title: "请选择商品",
					icon: "none",
				});
			} else {
				uni.showModal({
					title: "",
					content: "确认要删除选中的商品吗？",
					confirmColor: "#eb2444",
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								mask: true,
							});
							var params = {
								url: "/p/shopCart/deleteItem",
								method: "DELETE",
								data: basketIds,
								callBack: function (res) {
									uni.hideLoading();
									ths.loadBasketData();
								},
							};
							request(params);
						}
					},
				});
			}
		},
	},
};
</script>

<style>
/* pages/basket/basket.uniss */

page {
	width: 100%;
	background: #f4f4f4;
}

.container {
	padding-bottom: 118rpx;
}

container .prod-list {
	width: 100%;
	background: #f8f8f8;
}

.prod-list .prod-block {
	background: #fff;
	margin-top: 15rpx;
}

.prod-list .prod-block .discount-tips {
	padding: 20rpx 0 20rpx 20rpx;
	border-bottom: 2rpx solid #f4f4f4;
	height: 40rpx;
	line-height: 40rpx;
}

.prod-list .prod-block .discount-tips .text-block {
	padding: 3rpx 5rpx;
	/* padding: 0 5rpx; */
	border-radius: 8rpx;
	font-size: 22rpx;
	color: #eb2444;
	border: 2rpx solid #eb2444;
}

.prod-list .prod-block .discount-tips .text-list {
	font-size: 24rpx;
	margin-left: 10rpx;
}

.prod-list .item {
	background: #fff;
	display: flex;
	align-items: center;
	padding: 20rpx;
}

.prod-list .item .prodinfo {
	position: relative;
	color: #999;
	width: 100%;
}

.prod-list .item .prodinfo::after {
	content: "";
	background-color: #f4f4f4;
	left: 0;
	height: 1px;
	transform-origin: 50% 100% 0;
	bottom: -20rpx;
	position: absolute;
	display: block;
	width: 642rpx;
	padding-left: 20rpx;
}

.prod-list .item:last-child .prodinfo::after {
	height: 0;
}

.prod-list .item .staus {
	text-align: center;
	background: rgb(196, 192, 192);
	font-size: 20rpx;
	width: 50rpx;
	color: #fff;
}

.prodinfo {
	display: flex;
	margin-left: 20rpx;
}

.prod-list .item .opt {
	font-size: 28rpx;
	margin-left: 20rpx;
	width: 100%;
}

.prodinfo .opt .prod-name {
	color: #333;
	max-height: 72rpx;
	line-height: 36rpx;
	display: -webkit-box;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.prodinfo .opt .prod-info-text {
	color: #999;
	display: inline-block;
	-webkit-line-clamp: 1;
	height: 48rpx;
	line-height: 48rpx;
	background: #f9f9f9;
	padding: 0 10rpx 0 10rpx;
	border-radius: 4rpx;
	margin: 10rpx 0 0rpx 0;
	overflow: hidden;
	font-size: 24rpx;
	position: relative;
	font-family: arial;
}

.prodinfo .opt .prod-info-text.empty-n {
	padding: 0;
}

/* .prod-info-text:before, .prod-info-text:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border: 5px solid transparent;
  right: 5px;
  top: 10px;
} */

.prod-info-text:before {
	border-top: 5px solid #aaa;
}

.prod-info-text:after {
	border-top: 5px solid #f9f9f9;
	top: 9px;
}

.prod-list .item .prodinfo .pic {
	text-align: center;
	width: 180rpx;
	height: 180rpx;
	line-height: 180rpx;
	font-size: 0;
}

.prod-list .item .pic image {
	max-width: 100%;
	max-height: 100%;
	/* border-radius: 8rpx; */
	vertical-align: middle;
}

.prodinfo .opt .price-count {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.prodinfo .opt .price-count .price {
	color: #eb2444;
}

.lose-efficacy .prodinfo .opt .price-count .price {
	color: #999;
}

/* 加减框 */

.m-numSelector .minus,
.m-numSelector input,
.m-numSelector .plus {
	float: left;
	box-sizing: border-box;
	height: 56rpx;
	border: 2rpx solid #d9d9d9;
}

.m-numSelector {
	float: right;
}

.m-numSelector .minus,
.m-numSelector .plus {
	position: relative;
	width: 56rpx;
}

.m-numSelector .minus {
	border-right: 0;
	border-top-left-radius: 4rpx;
	border-bottom-left-radius: 4rpx;
}

.m-numSelector input {
	width: 56rpx;
	text-align: center;
	color: #333;
}

.m-numSelector .plus {
	border-left: 0;
	border-top-right-radius: 4rpx;
	border-bottom-right-radius: 4rpx;
}

.m-numSelector .minus::before,
.m-numSelector .plus::before,
.m-numSelector .plus::after {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	content: " ";
	width: 22rpx;
	height: 3rpx;
	background-color: #7f7f7f;
}

.m-numSelector .plus::after {
	transform: rotate(90deg);
}

.m-numSelector:not(.disabled) .minus:not(.disabled):active,
.m-numSelector:not(.disabled) .plus:not(.disabled):active {
	background-color: #f4f4f4;
}

/*checkbox 选项框大小  */

checkbox .uni-checkbox-input {
	border-radius: 50%;
	width: 35rpx;
	height: 35rpx;
}

/*checkbox选中后样式  */

checkbox .uni-checkbox-input.uni-checkbox-input-checked {
	background: #eb2444;
	border-color: #eb2444;
}

/*checkbox选中后图标样式  */

checkbox .uni-checkbox-input.wx-checkbox-input-checked::before {
	text-align: center;
	font-size: 22rpx;
	color: #fff;
	background: transparent;
	transform: translate(-50%, -50%) scale(1);
	-webkit-transform: translate(-50%, -50%) scale(1);
}

/* 购物车为空 */

.empty {
	font-size: 28rpx;
	color: #666;
}

.empty .txt {
	text-align: center;
	margin-top: 30rpx;
}

.empty .img {
	margin-top: 80rpx;
	text-align: center;
}

.empty .img image {
	width: 80rpx;
	height: 80rpx;
}

/* 失效商品 */

.lose-efficacy {
	margin-top: 20rpx;
	background: #fff;
}

.lose-efficacy .item {
	background: #f8f8f9;
}

.prod-list .lose-efficacy .discount-tips {
	padding: 20rpx 0;
	border-bottom: 2rpx solid #ddd;
	height: 50rpx;
	line-height: 50rpx;
	margin-left: 20rpx;
}

.lose-efficacy .discount-tips .empty-prod {
	color: #777;
	font-size: 26rpx;
	border: 2rpx solid #999;
	padding: 0 10rpx;
	border-radius: 8rpx;
	float: right;
	margin-right: 20rpx;
}

.price-count .disable-price {
	color: #999;
}

.prod-list .lose-efficacy .discount-tips .text-list {
	font-size: 30rpx;
	margin-left: 10rpx;
}

/** 底部按钮 */

.cart-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: row nowrap;
	height: 98rpx;
	border-top: 2rpx solid #f4f4f4;
	z-index: 999;
}

.cart-footer .btn {
	position: relative;
	display: flex;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	width: 0;
	background-color: #fafafa;
	background: rgba(255, 255, 255, 0.95);
	font-size: 28rpx;
}

.cart-footer .btn .total-msg {
	font-size: 20rpx;
}

.cart-footer .btn.total {
	display: flex;
	flex-flow: column;
	align-items: flex-start;
}

.cart-footer .btn.del {
	color: #eb2444;
	width: 70rpx;
	font-size: 22rpx;
	text-align: left;
	display: block;
	line-height: 102rpx;
}

.cart-footer .btn.all {
	width: 150rpx;
	font-size: 26rpx;
}

.cart-footer .btn.all label {
	display: flex;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
}

.cart-footer .btn.total {
	width: 300rpx;
}

.cart-footer .btn.total .price {
	color: #eb2444;
	font-size: 30rpx;
}

.cart-footer .btn.settle {
	width: 200rpx;
	background: #eb2444;
	color: #fff;
}

/** end 底部按钮 */
</style>
